{% extends 'base.html' %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
    <article class="mb-5">
        <h1 class="fw-bold mb-2">{{ post.title }}</h1>
        <div class="text-muted mb-4">
            <span class="me-3"><i class="fa fa-user"></i> {{ post.author.username }}</span>
            <span class="me-3"><i class="fa fa-calendar"></i> {{ post.created_at|date:"Y-m-d H:i" }}</span>
            <span class="me-3"><i class="fa fa-eye"></i> {{ post.views }}</span>
            <span class="me-3"><i class="fa fa-comment"></i> {{ post.comments.count }}</span>
        </div>

        <div class="mb-4">
            <span class="badge bg-primary me-2">
                <a href="{% url 'category' post.category.name|slugify %}" class="text-white text-decoration-none">
                    {{ post.category.name }}
                </a>
            </span>
            {% for tag in post.tags.all %}
            <span class="badge bg-secondary me-2">
                <a href="{% url 'tag' tag.name|slugify %}" class="text-white text-decoration-none">
                    {{ tag.name }}
                </a>
            </span>
            {% endfor %}
        </div>

        {% if post.image %}
        <div class="mb-4">
            <img src="{{ post.image.url }}" class="img-fluid rounded" alt="{{ post.title }}">
        </div>
        {% endif %}

        <div class="post-content">
            {{ post.content|safe }}
        </div>

        <div class="mt-6 pt-4 border-top">
            <h3 class="mb-4">评论 ({{ post.comments.count }})</h3>

            <!-- 评论表单 -->
            {% if user.is_authenticated %}
            <div class="mb-6">
                <form method="POST" action="{% url 'post_comment' post.pk %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ comment_form.content|as_crispy_field }}
                    </div>
                    <button type="submit" class="btn btn-primary">发表评论</button>
                </form>
            </div>
            {% else %}
            <div class="alert alert-info mb-6">
                <p>请 <a href="{% url 'login' %}" class="text-decoration-none">登录</a> 后发表评论</p>
            </div>
            {% endif %}

            <!-- 评论列表 -->
            {% for comment in comments %}
            <div class="comment mb-4 p-3 border rounded">
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <img src="https://picsum.photos/id/{{ comment.author.id }}/40/40" alt="{{ comment.author.username }}" class="rounded-circle me-2" width="40" height="40">
                        <div>
                            <div class="fw-bold">{{ comment.author.username }}</div>
                            <div class="text-muted small">{{ comment.created_at|date:"Y-m-d H:i" }}</div>
                        </div>
                    </div>
                    {% if user == comment.author %}
                    <div>
                        <a href="#" class="text-muted small me-2">编辑</a>
                        <a href="#" class="text-muted small">删除</a>
                    </div>
                    {% endif %}
                </div>
                <div class="mt-2">
                    {{ comment.content }}
                </div>
            </div>
            {% endfor %}
        </div>
    </article>

    <!-- 相关文章 -->
    <div class="mb-5">
        <h3 class="mb-4">相关文章</h3>
        <div class="row">
            {% for related_post in popular_posts %}
            {% if related_post != post %}
            <div class="col-md-6 mb-3">
                <div class="card h-100">
                    {% if related_post.image %}
                    <img src="{{ related_post.image.url }}" class="card-img-top" alt="{{ related_post.title }}" style="height: 200px; object-fit: cover;">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="{{ related_post.get_absolute_url }}" class="text-dark text-decoration-none">{{ related_post.title }}</a>
                        </h5>
                        <p class="card-text text-muted small">{{ related_post.excerpt|truncatechars:50 }}</p>
                    </div>
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>
{% endblock %}